<template>
  <div class="loading-page">
    <img class="loading-main" src="../perm/assets/加载图.jpg">
    <div class="loading-content">
      <div class="loading-animation">
        <div v-for="n in 10":key="n" :style="getAnimationStyle(n)"></div>
      </div>
      <div class="loading-title">
        正在进入...
      </div>
    </div>

  </div>
</template>

<script>
export default {
    name: 'LoadingPage',
    methods: {
        getAnimationStyle (n) {
            return {
                animationDelay: (n * 200) + 'ms'
            }
        }
    }
}
</script>

<style lang="less">
    .loading-page {
        position: fixed;
        top:0;
        left:0;
        width: 100%;
        height:100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: white;
        z-index: 100;
        .loading-main {
            flex-shrink: 0;
            width: 100%;
            display: block;
        }
        .loading-content {
            position: absolute;
            bottom: 0;
            left:0;
            width:100%;
            height: 1.8rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: white;
        }
        .loading-animation {
            display: flex;
            >div{
                width: 0.18rem;
                height: 0.18rem;
                border: 2px solid #bbb;
                animation: loading-animation 3s linear infinite;
            }
        }
        .loading-title {
            margin-top: 0.2rem;
            color: #ff5f5f;
            font-size: 0.28rem;
        }
        @keyframes loading-animation{
            0% {
                border-color: #ff5f5f;
            }
            50% {
                border-color: #eee;
            }
            100% {
                border-color: #eee;
            }
        }
    }
</style>
